<template>
  <div class="page bg-white">
    <headerbar>筑固工程</headerbar>
    <section class="frame-content-sub no-bg" style="overflow-y: hidden">
      <section class="">
        <ul class="tab">
          <li @click="loadData()" :class="{ active: tabIndex == 0 }">
            <span>动态</span>
          </li>
          <li @click="clickMenu(1)" :class="{ active: tabIndex == 1 }">
            <span>示范带</span>
          </li>
          <li @click="loadDataH5()"><span>示范点</span></li>
          <li @click="tabIndex = 3" :class="{ active: tabIndex == 3 }">
            <span>线上观摩</span>
          </li>
          <!--        <li @click="unOpen()" :class="{'active':tabIndex==2}"><span>示范点</span></li>-->
          <!--        <li @click="unOpen" :class="{'active':tabIndex==3}"><span>线上观摩</span></li>-->
        </ul>
      </section>
      <section class="mgt-2" v-if="tabIndex === 0">
        <fetchData :loading="isLoading" :data="swipeData"></fetchData>
        <div class="d-scroll list-news-img" style="">
          <cube-scroll
            ref="scroll"
            :options="options"
            @pulling-up="onPullingUp"
            @pulling-down="onPullingDown"
            :scrollEvents="['scroll-end']"
            v-remainScrollCube="'workingTrendsDynamic'"
          >
            <section>
              <transition-group name="swipe" tag="div">
                <div class="" v-for="(data, index) in swipeData" :key="data.id">
                  <section ref="swipeItem" :index="index">
                    <div @click="goDetail(data)" class="item">
<!--                      <div class="img" v-if="data.listPic">
                        <img
                          :src="tools.getImgUrl(data.listPic)"
                          alt=""
                        />
                      </div>-->
                      <div class="img" v-if="tools.indexOfHttp(data.listPicUrl)">
                        <img :src="data.listPicUrl" alt="">
                      </div>
                      <div class="img" v-else-if="data.listPic">
                        <img :src="tools.getImgUrl(data.listPic,true)" alt="">
                      </div>
                      <div class="cont">
                        <h2 class="title"><div class="hower">{{data.title}}</div></h2>
                        <!--                        <div class="tip"><span class="one">发布：{{data.source}}</span><span class="one">审核人：{{getcheckUser(data)}}</span></div>-->
                        <!--                        <div class="tip"><span class="one">{{data.source}}</span><span class="one">审核人：{{getcheckUser(data)}}</span></div>-->
                        <!--                        <div class="tip">-->
                        <!--                          <span class="one">发布时间：{{getTime(data.createTime)}}</span>-->
                        <!--                        </div>-->
                        <div class="tip no-wrap">
                          <span class="no-wrap">{{
                            tools.formatDate(data.createTime)
                          }}</span>
                          <span class="source">{{
                            data.source || "未知"
                          }}</span>
<!--                          <span class="no-wrap">阅读 {{ data.views || 0 }}</span>-->
                          <broadcast :item="data"/>
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </transition-group>
            </section>
            <!-- <noData
              :loading="isLoading"
              :data="swipeData"
              v-if="!isLoading && swipeData.length <= 0"
            ></noData> -->
            <!-- W noData -->
            <noData v-if="!isLoading && swipeData.length <= 0"></noData>
            <onBottom v-else-if="onBottom"></onBottom>
          </cube-scroll>
        </div>
      </section>
      <section
        class="d-scroll list-news-img bg-white"
        v-if="tabIndex === 1"
      >
        <fetchData :loading="isLoading" :data="list"></fetchData>
        <cube-scroll
          ref="scroll"
          :options="launchOptions"
          @pulling-up="launchOnPullingUp"
          @pulling-down="launchOnPullingDown"
          :scrollEvents="['scroll-end']"
          v-remainScrollCube="'onlineObservation'"
        >

          <div class="sfd-banner">
            <div class="sfd-title">
              <span class="icon-star"></span>
              视频
              <p @click="goMore">更多>&nbsp;>&nbsp;</p>
            </div>
            <div class="banber">
              <banner></banner>
            </div>
          </div>
          <div class="sfd-title"><span
            class="icon-star"></span>经验做法</div>
          <div
            class="item"
            @click="goRedCloudNewsDetail(item)"
            v-for="(item, index) in list"
            :key="'m' + index"
          >
<!--            <div class="img">
              <img
                v-if="!item.listPic"
                src="../../../../static/images/user_bg.jpg"
                alt=""
              />
              <img
                v-if="item.listPic"
                :src="tools.getImgUrl(item.listPic, true)"
                alt=""
              />
            </div>-->
            <div class="img" v-if="tools.indexOfHttp(item.listPicUrl)">
              <img :src="item.listPicUrl" alt="">
            </div>
            <div class="img" v-else-if="item.listPic">
              <img :src="tools.getImgUrl(item.listPic,true)" alt="">
            </div>
            <div class="cont">
              <h2 class="title"><div class="hower">{{item.title}}</div></h2>
              <div class="tip no-wrap">
                <span class="no-wrap">{{
                  tools.formatDate(item.createTime)
                }}</span>
                <span class="source">{{ item.source || "未知" }}</span>
<!--                <span class="no-wrap">阅读 {{ item.views || 0 }}</span>-->
                <broadcast :item="item"/>
              </div>
            </div>
          </div>
          <noData
            :loading="isLoading"
            :data="list"
            v-if="!isLoading && list.length <= 0"
          ></noData>
          <onBottom v-else-if="onBottom1"></onBottom>
          <p class="pdv-7"></p>
        </cube-scroll>
      </section>

      <section class="bg-white" v-if="tabIndex === 2">
        <demoSite></demoSite>
      </section>
      <section class="bg-white" v-if="tabIndex === 3">
        <observe></observe>
      </section>
    </section>
  </div>
</template>

<script>
import tools from "@/utils/tools";
import loginService from "@/service/loginService";
import demoSite from "./workingTrends/demoSite.vue";
import observe from "./workingTrends/observe.vue";
import banner from "./workingTrends/banner.vue";
import moment from "moment";
export default {
  name: "workingTrends",
  components: { demoSite, observe, banner },
  data() {
    return {
      tabIndex: 0,
      pageNo: 1,
      options: {
        pullUpLoad: true,
        pullDownRefresh: {
          txt: " ",
        },
        scrollbar: false,
      },
      launchOptions: {
        pullUpLoad: true,
        pullDownRefresh: {
          txt: " ",
        },
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      onBottom1: false, // W onBottom
      swipeData: [],
      swipeDataH5: [],
      pageNoH5: 1,
      excludeIds: [],
      pageIndex: 1,
      pageSize: 10,
      isLoading: true,
      list: [],
    };
  },
  created() {
    this.$route.meta.keepAlive = true;
    this.loadData();
    this.tabIndex = this.$store.state.workingTrends_tabIndex || 0;
    if (this.tabIndex === 1) {
      this.clickMenu(1);
    }

    sessionStorage.setItem("onlineObservationFirst", JSON.stringify(true));
  },
  activated() {},
  watch: {
    tabIndex(newVal) {
      this.$store.state.workingTrends_tabIndex = newVal;
    },
  },
  beforeRouteLeave(to, from, next) {
    this.$route.meta.keepAlive = to.name === "redCloudNewsDetail";
    if (this.$route.meta.keepAlive) {
      this.$store.commit("addRoute", "workingTrends");
    } else {
      this.$store.commit("removeRoute", "workingTrends");
      this.$destroy();
    }
    next();
  },
  methods: {
    loadData() {
      this.onBottom = false;
      this.isLoading = true;
      this.tabIndex = 0;
      let data = {
        channelId: "881c2824f5ee430aaa39a9b6550a5131",
        pageNo: this.pageNo,
        pageSize: 20,
      };
      this.fetchService.contentPage(data).then((res) => {
        this.isLoading = false;

        if (res.code === 0 && res.data.page.length < 1) {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          this.onBottom = true;
          this.options.pullUpLoad = false;
          return;
        }
        this.pageNo++;
        this.swipeData = this.swipeData.concat(res.data.page);
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
        }, 100);
      });
    },
    loadDataH5() {
      let data = {
        pageNo: this.pageIndex,
        pageSize: this.pageSize,
        // partyGroupId: this.partyGroupId,
        partyGroupId: "999001001002",
        type: 2,
      };
      this.fetchService.newsQuery(data).then((res) => {
        if (res.code !== 0) {
          return this.tools.tip(res.message || "接口服务出错，请联系管理员");
        }
        this.$router.push({ path: "onlineObservation" });
      });
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData();
    },
    onPullingDown() {
      console.log("onPullingDown");
      this.pageNo = 1;
      this.swipeData = [];
      this.onBottom = false;
      this.options.pullUpLoad = true;
      this.loadData();
    },
    launchOnPullingUp() {
      console.log("launchOnPullingUp");
      this.clickMenu(this.tabIndex);
    },
    launchOnPullingDown() {
      console.log("onPullingDown");
      console.log("this.tabIndex", this.tabIndex);
      this.pageIndex = 1;
      this.list = [];
      this.onBottom1 = false;
      this.options.pullUpLoad = true;
      this.clickMenu(this.tabIndex);
    },
    // 示范带视频更多
    goMore() {
        this.$router.push({ name: "sfdVideoMore" });
    },
    goDetail(data) {
      // 解决驻固工程动态和示范带详情显示不一致，评论列表不一致
      // 详情页可共用
      return this.goRedCloudNewsDetail(data, "动态");
      //        this.$store.state.newsDetail = data
      //        this.$router.push({path: `/workingTrendsDetail/${data.id}`})
    },
    getcheckUser(data) {
      if (!data.checkUserInput || data.checkUserInput === "") {
        return data.checkUserAuto;
      }
      return data.checkUserInput;
    },
    getTime(createTime) {
      return moment(createTime).format("YYYY-MM-DD HH:mm");
    },
    clickMenu(index) {
      this.launchOptions.pullUpLoad = true;
      this.tabIndex = index;
      this.$store.state.workingTrends_tabIndex = index;
      if (index === 1) {
        this.fetchList("fd18aaf1014848b699a6ca3d0f701a48");
      }
    },
    unOpen() {
      this.tools.alert("功能未开放");
    },
    fetchList(id) {
      this.onBottom1 = false;
      this.excludeIds = [];
      this.isLoading = true;
      let data = {
        channelId: id || "",
        pageNo: this.pageIndex,
        pageSize: this.pageSize,
        summary: "",
        title: "",
        excludeIds: this.excludeIds,
      };
      return this.fetchService.contentPage(data).then((res) => {
        if (res.code !== 0) {
          return this.tools.alert(res.message || res.resp_msg);
        }
        if (res.code === 0 && res.data.page.length < 1) {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          this.onBottom1 = true;
          this.launchOptions.pullUpLoad = false;
          return;
        }
        this.isLoading = false;
        this.$refs.scroll.forceUpdate &&
          this.$refs.scroll.forceUpdate(true, false);
        if (this.pageIndex === 1) {
          this.list = [];
          this.topList = [];
          this.recommend = [];
        }
        this.pageIndex++;
        this.list = this.list.concat(res.data.page);
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
        }, 100);
        return res;
      });
    },
    goRedCloudNewsDetail(item, title) {
      this.$store.state.tempListData = this;
      this.$store.state.newsDetail = item;
      this.$router.push({
        name: "redCloudNewsDetail",
        params: { id: item.id, title: title || "示范带" },
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/common/stylus/moon.scss";
.list-news-img .item .cont .title {
  font-size: 16PX;
  font-weight: normal;
  min-height: 3em;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  /* display: flex; */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-direction: column;
  flex-direction: column;
}
.sfd-banner {
  background: rgba(255, 255, 255, 1);
  .banber {
    height: calc(100vw * 9 / 16 + #{pxToRem(60px)});
    .swiper-container {
      height: 100%;
      // height: calc(100vw * 9 / 16);
    }
  }
}
.sfd-title {
  font-size: 16PX;
  margin: pxToRem(12px) 0 0;
  padding: 0 pxToRem(29px);
  height: pxToRem(40px);
  line-height: pxToRem(26px);
  .icon-star{
    display: inline-block;
    background: url('../../../../static/images/user_icon_star.png') no-repeat center;
    width: 0.4rem;
    height: 0.4rem;
    background-size: 100% 100%;
    margin-right: 0.13333rem;
  }
  p{
    font-size: 14PX;
    display: inline-block;
    height: 100%;
    line-height: pxToRem(26px);
    float: right;
    padding: pxToRem(8px) pxToRem(2px) 0 0;
  }
}
/* .sectionTwo {
  height: calc(100vh - #{pxToRem(60px)} - #{pxToRem(50px)} - #{pxToRem(170px)} - calc(100vw * 9 / 16));
} */
</style>
